<template>
<!-- 修改收获地址 -->
  <div id="pop">
    <div class="module-dialog-layer" style="display: block;"></div>
    <div class="module-dialog clear module-dialog-address module-dialog-show">
      <div class="dialog-panel">
        <div class="topbar">
          <div class="dialog-tit clear">
            <h4 class="js-dialog-title">管理收货地址</h4>
          </div>
          <span class="dialog-close" @click="$emit('update:isShow',false)">x</span>
        </div>
        <div class="dialog-con js-dialog-container">
          <div class="animate-layer">
            <div class="dialog-inner js-address-add">
              <div class="save-address-box">
                <div class="address-form">
                  <div class="module-form-row">
                    <div class="form-item-v3">
                      <!-- <i>收货人姓名</i> -->
                      <input type="text" class="js-verify" placeholder="收货人姓名"
                      v-model="addressInfo.name"/>
                      <div class="verify-error">{{verifyName}}</div>
                    </div>
                  </div>
                  <div class="module-form-row">
                    <div class="form-item-v3">
                      <!-- <i>手机号</i> -->
                      <input type="text" class="js-verify" placeholder="手机号" 
                      v-model="addressInfo.phone"/>
                      <div class="verify-error">{{verifyPhone}}</div>
                    </div>
                  </div>
                  <div class="module-form-row clear">
                    <div class="form-item-v3 area-code-w fn-left form-valid-item">
                      <!-- <i>区号（可选）</i> -->
                      <input type="text" class="js-verify js-address-area-code" placeholder="区号（可选）"
                      v-model="addressInfo.areacode"/>
                      <div class="verify-error"></div>
                    </div>
                    <div class="form-item-v3 telephone-w fn-right form-valid-item">
                      <!-- <i>固定电话（可选）</i> -->
                      <input type="text" class="js-verify js-address-telephone" placeholder="固定电话（可选）"
                      v-model="addressInfo.tel" />
                      <div class="verify-error"></div>
                    </div>
                  </div>
                  <div class="module-form-row clear">
                    <div class="form-item-v3 select-item province-wrapper">
                      <!-- 省份的选择列表 -->
                      <select
                        name="province_code"
                        v-model="addressInfo.provinceId"
                        class="province select-province js-form-province js-verify"
                        @change="changeAddress('p')"
                      >
                        <option value="0">请选择省份</option>
                        <option 
                        v-for="item in provinceLists"
                        :key="item.aid"
                        :value="item.aid">{{item.atitle}}</option>
                      </select>
                    </div>
                  </div>
                  <div class="module-form-row clear">
                    <div class="form-item-v3 select-item city-wrapper fn-left form-focus-item">
                      <select class="city select-city js-form-city js-verify"
                      v-model="addressInfo.cityId"
                      @change="changeAddress('c')">
                        <option value="0">请选择城市</option>
                        <option 
                        v-for="item in cityLists"
                        :key="item.aid"
                        :value="item.aid">{{item.atitle}}</option>
                      </select>
                    </div>
                    <div class="form-item-v3 select-item district-wrapper fn-right form-focus-item">
                      <select class="city select-city js-form-city js-verify"
                      v-model="addressInfo.areasId">
                        <option value="0">请选择区县</option>
                        <option 
                        v-for="item in areasLists"
                        :key="item.aid"
                        :value="item.aid">{{item.atitle}}</option>
                      </select>
                    </div>
                  </div>
                  <div class="module-form-row">
                    <div class="form-item-v3">
                      <!-- <i>详细地址，如街道名称，楼层，门牌号码等</i> -->
                      <input type="text" class="js-verify" 
                      v-model="addressInfo.add"
                      placeholder="详细地址，如街道名称，楼层，门牌号码等"/>
                      <div class="verify-error"></div>
                    </div>
                  </div>
                  <div class="module-form-row fn-clear">
                    <input type="checkbox" class="hide" />
                    <span class="blue-checkbox"
                    :style="{'background-position-y': addressInfo.default?'-20px':'0px'}"
                    @click.stop="addressInfo.default=!addressInfo.default"></span>设为默认
                  </div>
                  <div class="dialog-blue-btn big-main-btn js-verify-address"
                  :class="{'disabled-btn':!allChecked}"
                  @click.stop="saveData">
                    <a>保存</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props:{
    addData:Object,
    isShow:Boolean
  },
  data(){
    return {
      addressInfo:{
        name: '',
        phone: '',
        areacode: '',   //区号
        tel: '',
        provinceId: "0",
        province: '',
        cityId: "0",
        city: "",
        areasId: "0",
        areas: "",
        add: '',
        default: false
      },
      //初始化的数据
      oldAddressLists:{
        name: '',
        phone: '',
        areacode: '',   //区号
        tel: '',
        provinceId: "0",
        province: '',
        cityId: "0",
        city: "",
        areasId: "0",
        areas: "",
        add: '',
        default: false
      },
      //存储地址的所有数据
      allDatas:[],
      //省列表
      provinceLists:[],
      //市列表
      cityLists:[],
      //区县列表
      areasLists:[],
      //姓名和手机号码的正则验证
      verifyName:"",
      verifyPhone:""

    }
  },
  async created(){
    let res=await fetch("/data/areas.json")
    this.allDatas=await res.json();
    // console.log(this.allDatas,"全部列表");
    //先拿到所有的省
    this.provinceLists=this.allDatas.filter(item=>item.pid=='')
    // console.log(this.provinceLists,"省份");
  },
  methods:{
    //根据参数获取相应的下一级
    changeAddress(tip){
      // console.log(event.target.value);
      if(tip=='p'){
        //获取城市列表
        // 每一个的event.target.value值都是绑定aid 如果aid的值和下一级 pid的值相等 那么显示对应的下一级
        this.cityLists=this.allDatas.filter(item=>item.pid==event.target.value)
        console.log(this.cityLists,"对应的城市列表");
        //将上一次的列表清空
        this.addressInfo.cityId='0';
        this.areasLists=[];
        this.addressInfo.areasId='0';
      }
      if(tip=='c'){
        this.areasLists=this.allDatas.filter(item=>item.pid==event.target.value);
        // console.log(this.areasLists,"对应的地区列表");
      }
    },
    saveData(){
      //这个方法有可能是添加一个新地址 或者是修改一个地址
      //遍历全部列表
      this.allDatas.forEach(item=>{
        //判断当前的aid是否等于定义列表的省份/城市/地区 id
        // 是的话就把新值添加给列表对应的位置
        if(item.aid==this.addressInfo.provinceId){
           this.addressInfo.province = item.atitle
        }
        if(item.aid==this.addressInfo.cityId){
           this.addressInfo.city = item.atitle
        }
        if(item.aid==this.addressInfo.areasId){
           this.addressInfo.areas = item.atitle
        }
      })
      // 通过 addData 到底是收货地址对象(修改) 还是 null (添加)
      if(this.addData){
        //要修改  info最新改好的地址信息
        this.$store.commit('saveData',{info:this.addressInfo,type:'modify'});
      }else{
        //要添加新的
        this.$store.commit('saveData',{info:this.addressInfo,type:'add'})
      }

      //把当前的整个地址信息重置为初始化状态
      this.addressInfo=this.oldAddressLists;
      //当前的修改弹出框隐藏
      this.$emit('update:isShow',false)
    }
  },
  watch:{
    addData:{
      handler(obj){
        console.log(obj,"监测到啦");
        if(obj){
          this.addressInfo=obj;
        }else{
          this.addressInfo=this.oldAddressLists;
        }
      },
      immediate:true
    },
    //监测姓名
    "addressInfo.name"(val){
      if(val.length<2 || val.length>4){
        this.verifyName="您输入的姓名不符合规则";
      }else{
        this.verifyName="";
      }
    },
    //监测电话号码
    "addressInfo.phone"(val){
      if(/^1[345679]\d{9}$/.test(val)){
        this.verifyPhone="";
      }else{
        this.verifyPhone="您的手机号不符合规则";
      }
    }
  },
  computed:{
    //全部都通过校验的计算属性
    allChecked(){
      //是否全部通过校验
      if(this.verifyName=='' && this.verifyPhone=='' && this.addressInfo.add!==''){
          return true;  //放行
      }else{
        return false;
      }
    },
  }
};
</script>

<style>
</style>